<template>
    <div class="co-exchange-page">
        <div ref="elToolbar" class="co-el-toolbar">
            <el-form :model="params">
                <div class="co-toolbar co-box-row">
                    <el-date-picker 
                        type="datetimerange" 
                        value-format="X" 
                        :editable="false" 
                        v-model="params.range" 
                        :shortcuts="timeshortcuts"
                        range-separator="至" 
                        start-placeholder="开始日期" 
                        end-placeholder="结束日期" 
                        size="default" 
                        :clearable="false"
                        @change="onChange"
                    ></el-date-picker>
                    <el-form-item label="操作员:" size="default">
                        <el-select v-model="params.uid" style="max-width: 7rem;">
                            <el-option :value="-1" label="全部"></el-option>
                            <el-option v-for="item in accounts" :key="item.id" :value="item.id" :label="item.realname ?? item.username"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item class="input-no" label="交班单号:" size="default">
                        <el-input v-model="params.filter" placeholder="交班单号" clearable value-on-clear="''" ></el-input>
                    </el-form-item>
                    <el-button type="primary" @click="onSearch">查询</el-button>
                </div>
            </el-form>
        </div>
        <div class="ui-data-list-panel">
            <div class="co-flowlist-grid ui-data-grid">
                <el-table :data="data" size="small" highlight-current-row :height="h">
                    <el-table-column label="交班号" prop="no" width="200"></el-table-column>
                    <el-table-column label="当班人" prop="uid" width="100px">
                        <template #default="{row}">
                            {{acd[row.uid]?.realname ?? acd[row.uid]?.username}}
                        </template>
                    </el-table-column>
                    <el-table-column label="接班现金" prop="amount" width="68" align="right"></el-table-column>
                    <el-table-column label="交班现金" prop="last_amount" width="68" align="right"></el-table-column>
                    <el-table-column label="钱箱提现" prop="cash_out" width="68" align="right"></el-table-column>
                    <el-table-column label="现金收入" prop="amount_in" width="68" align="right"></el-table-column>
                    <el-table-column label="接班线上" prop="amount_online" width="68" align="right"></el-table-column>
                    <el-table-column label="线上收入" prop="amount_online_in" width="68" align="right"></el-table-column>
                    <el-table-column label="交班线上" prop="last_amount_online" width="68" align="right"></el-table-column>
                    <el-table-column label="盘盈" width="88" align="right"></el-table-column>
                    <el-table-column label="盘亏" width="88" align="right"></el-table-column>
                    <el-table-column label="接班时间" prop="starttime" width="120" align="center" :formatter="dateFormatter"></el-table-column>
                    <el-table-column label="交班时间" prop="endtime" width="120" align="center" :formatter="dateFormatter"></el-table-column>
                </el-table>
            </div>
            <div class="ui-pagination-ctn box-row">
                <div class="flex"></div>
                <el-pagination
                    v-model:current-page="params.page" :page-size="params.limit" :page-sizes="[23, 50, 100, 200]"
                    layout="sizes, total, prev, pager, next" :total="total" 
                    @size-change="onPageSizeChanged" @current-change="onCurrentPageChanged"
                ></el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
import {useElementSize} from '@vueuse/core';
import { reactive, ref, toRefs,computed } from 'vue-demi'
import { ElMessage } from 'element-plus';
import {  UIMode } from '../../uiframe/services/session';
import { useSocket } from '../../uiframe/services/socket';
import { dict, timeShortcuts,rmbFormat,dateFormat } from '../../uiframe/utils';

export default {
    setup(props){
        let elToolbar = ref(null), data = reactive({
            params:{
                range:timeShortcuts(['1m'])[0].value.map(v=>Math.floor(v / 1000)), 
                limit:21, 
                page:1,
                uid:-1,
                filter:""
            },
            timeshortcuts:timeShortcuts(['cd', 'pd', '7d', '15d', 'cw', 'pw', 'cm', 'pm','3m']),
            data:[], 
            users:{},
            total:0,
            tbsize: useElementSize(elToolbar),
            h:computed(()=>UIMode.mh.value - (data.tbsize.height + 34)),
            accounts:[],
            acd:{}
        });

        useSocket().then(socket=>socket.rpc('accounts',{}).then(res=>{
            data.accounts = res.data.data
            data.acd = dict(res.data.data, 'id')
        }).catch(res=>onmessage(res)));

        const onmessage = (msg) => { ElMessage({ type: msg.success ? 'success' : 'error', message: msg.message }) },
        methods = {
            onSearch:()=>{
                useSocket().then(socket=>socket.rpc('shift.search', data.params).then(res=>{
                    data.data = res.data.data;
                    data.total = res.data.total;
                }).catch(res=>onmessage(res)));
            },
            onCurrentPageChanged:(page)=>{
                data.query.page = page;
                methods.onSearch();
            },
            onPageSizeChanged:(limit)=>{
                data.query.limit = limit;
                methods.onSearch();
            },
            onChange:()=>{

            },
            dateFormatter:(r,c,v)=>dateFormat(v, 'Y-M-D h:m')
        },
        formatter = {
            
        }

        methods.onSearch();

        return {
            elToolbar,
            ...toRefs(data),
            ...formatter,
            ...methods
        }
    }
}
</script>
<style lang="scss">
.co-exchange-page{
    position: absolute;left:0;right:0;bottom:0;top:0;
}
</style>